<template>
  <div id="map" class="map"></div>
</template>

<script>
import "ol/ol.css";
import ImageLayer from "ol/layer/Image";
import Map from "ol/Map";
import Projection from "ol/proj/Projection";
import Static from "ol/source/ImageStatic";
import View from "ol/View";
import { getCenter } from "ol/extent";
import staticImg from '@/images/staticMap.png'

export default {
  name: "staticImage_Map",

  methods: {
    initMap() {
      // Map views always need a projection.  Here we just want to map image
      // coordinates directly to map coordinates, so we create a projection that uses
      // the image extent in pixels.
      var extent = [0, 0, 1024, 968];
      var projection = new Projection({
        code: "xkcd-image",
        units: "pixels",
        extent: extent
      });

      var map = new Map({
        layers: [
          new ImageLayer({
            source: new Static({
              url: staticImg,
              projection: projection,
              imageExtent: extent
            })
          })
        ],
        target: "map",
        view: new View({
          projection: projection,
          center: getCenter(extent),
          zoom: 2,
          maxZoom: 8
        })
      });
    }
  },

  mounted() {
    this.initMap();
  }
};
</script>

<style lang="less" scoped>
.map {
  height: 100%;
}
</style>